<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">


</head>
<body>
<div id="app" class="container">
    <h1>{{message}}}</h1>
    <div v-show="listNoticeDiv">
        <form id="queryForm" style="display: inline">
            <input type="text" id="titleId" name="title" placeholder="请输入标题">
            <input type="button" value="查询" @click="doQueryNotices">
        </form>
        <button @click="doShowOrHide">添加</button>
      <table class="table">
            <thead>
         <tr>
               <th>序号</th>
               <th>标题</th>
              <th>类型</th>
              <th>状态</th>
              <th>创建时间</th>
            <th>操作</th>
          </tr>
          </thead>

           <tbody>
              <tr v-for="(n,i) in notices" :key="i">
                <td>{{i+1}}</td>
                <td>{{n.title}}</td>
                <td>{{n.type}}</td>
                <td>{{n.status}}</td>
                <td>{{n.createdTime}}</td>
                  <td><button class="btn btn-success" @click="doFindById(n)" style="color: blue">修改</button>
                      <button class="btn btn-danger" @click="deleteById(n.id)">删除</button>
                  </td>
             </tr>
           </tbody>
        </table>
        <div class="pagination">
            <button class="pre" @click="doJumpToPage">上一页</button>
            <button class="percent">{{pageCurrent}}/{{pageCount}}</button>
            <button class="next" @click="doJumpToPage">下一页</button>
            <form style="display: inline">
                <input id="pageForm" type="number" v-model="pageCurrent">
                <input type="button" value="跳转" class="jump" @click="doJumpToPage">
            </form>
        </div>
    </div>
        <div v-show="editNoticeDiv" style="display: block">
            <h2>公共编辑区(添加或更新)</h2>
            <form>
                <input type="hidden" v-model="id" id="id">
                <div class="form-group">
                    <label for="typeId"  >类型:</label>
                    <select class="form-control" v-model="type" id="typeId">
                        <option value="1">通知</option>
                        <option value="2">公告</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="tId">标题:</label>
                    <input type="text" class="form-control" v-model="title" id="tId" placeholder="title">
                </div>
                <div class="form-group">
                    <label for="contentId">内容:</label>
                    <textarea class="form-control" v-model="content" rows="3" id="contentId">
                   </textarea>
                </div>
                <div class="form-group">
                    <label>状态:</label>
                    <label class="radio-inline">
                        <input type="radio" v-model="status" name="status" value="0" checked> 正常
                    </label>
                    <label class="radio-inline">
                        <input type="radio" v-model="status" name="status" value="1"> 关闭
                    </label>
                </div>
                <button type="button" class="btn btn-primary submit" @click="doSaveOrUpdate">Submit</button>
                <button type="button" class="btn btn-primary cancel" @click="doCancel">Cancel</button>
            </form>
        </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>


    var vm = new Vue({
        el:"#app",//定义监控点,vue底层会基于监控点在内存中构建dom树
        data:{//此对象中定义页面上要操作的数据
            message:"通告管理客户端实现(Bootstrap/Vue.js/Axios)",
            notices:[],
            pageCurrent:1,
            pageCount:0,
            id:"",
            title:"",
            content:"",
            status:"",
            type:"",
            listNoticeDiv:true,
            editNoticeDiv:true
        },
        methods:{//此位置定义所有业务事务处理函数
            doShowOrHide(){
              vm.listNoticeDiv = false;
              vm.editNoticeDiv = true;
            },
            doCancel(){
                this.editNoticeDiv=false;
                this.listNoticeDiv=true;

            },

            doFindById(n){
                //修改vue对象中data(model)中的属性值
                this.id=n.id;
                this.title = n.title;
                this.content = n.content;
                this.type = n.type;
                this.status = n.status;
                this.doShowOrHide();
            },

            doSaveOrUpdate(){
                //定义url
              let url=`http://localhost/notice/`;
              let params={
                  "id":this.id,
                  "title":this.title,
                  "content":this.content,
                  "type":this.type,
                  "status":this.status
              }
              axios({
                  method:this.id?"put":"post",
                  url:url,
                  data:params
              }).then((response)=> {
                  let result = response.data;
                  if (result.state==1){
                      alert("save ok");
                      this.doGetNotices();
                      this.resetForm();
                      this.doCancel();
                  }else{
                      alert(result.message);
                  }
              })

              // if (this.id){
              //     axios.put(url,params).then((response)=> {
              //         let result = response.data;
              //         if (result.state==1){
              //             alert("save ok");
              //             this.doGetNotices();
              //             this.resetForm();
              //         }else{
              //             alert(result.message);
              //         }
              //     })
              // }else{
              //     axios.post(url,params).then((response)=> {
              //         let result = response.data;
              //         if (result.state==1){
              //             alert("save ok");
              //             this.doGetNotices();
              //             this.resetForm();
              //         }else{
              //             alert(result.message);
              //         }
              //     })
              // }

            },
            resetForm(){
                this.id="",
                this.title="",
                this.content="",
                this.status="",
                this.type=""
            },
            deleteById(id){
                let url=`http://localhost/notice/${id}`;
                axios.delete(url).then((response)=>{
                    let result=response.data;
                    if(result.state==1){
                        alert(result.message);//给出提示信息
                        //刷新页面(假如是最后一页，并且当前页码值大于1，当前页记录只有一条，则查询上一页数据)
                        //let rows=document.querySelector("table>tbody").children.length;
                        let rows=document.querySelectorAll("table>tbody>tr").length;
                        if(this.pageCurrent>1&&this.pageCurrent==this.pageCount&&rows==1){
                            this.pageCurrent--;
                        }
                        this.doGetNotices();
                    }else{
                        alert(result.message);
                    }
                })
            },

            doQueryNotices(event){
              //设置当前页码值
                this.pageCurrent=1;
                //执行查询操作
                this.doGetNotices();
            },


            doJumpToPage(event){//event对象表示事件,基于此对象key获取被点击的对象

              //1.获取被点击的对象的class属性值(event.target被点击事件)
               let cls =  event.target.getAttribute("class");
              //2.基于属性值修改当前页码值
                if (cls=="pre"&&this.pageCurrent>1){
                    this.pageCurrent--;
                }else if (cls=="next"&&this.pageCurrent<this.pageCount){
                    this.pageCurrent++;
                }else if(cls=="jump"){
                   // let input = document.querySelector("#pageNumId");
                    //let input = document.getElementById("pageNumId")
                    if (this.pageCurrent<1||this.pageCurrent>this.pageCount){
                        alert("页码值不正确");
                        this.pageCurrent=1;
                        return;
                    }else{
                        this.doGetNotices();
                    }

                }else{
                    console.log("被执行了!!!")
                    return;
                }
              //3.基于新的页码值重新执行查询
              this.doGetNotices();
            },



            doGetNotices(){
                // let queryForm = document.querySelector("#queryForm");
                // let title = queryForm.elements[0].value;
                let title = document.querySelector("#titleId").value;
               // let url = `http://localhost/notice/?pageCurrent=${this.pageCurrent}&title=${title}`;
                let url = `http://localhost/notice/`;
                //成功执行then失败执行catch
                axios.get(url,{
                    params: {
                        pageCurrent: this.pageCurrent,
                        title:title
                    }
                }).then(function (response){
                    let jsonResult = response.data;
                    //设置notices将服务端响应的数据赋值给data对象中的notices属性
                    this.vm.notices = jsonResult.data.list;
                    //设置分页初始数据
                    this.vm.pageCurrent=jsonResult.data.pageNum;
                    this.vm.pageCount=jsonResult.data.pages;
                })
            }

        },
        mounted(){//vue中的一个声明周期函数,此函数在页面元素加载完成以后执行
            this.doGetNotices();
        }
    });
</script>
</body>
</html>